<template>
  <div class="dashuju">
    <Head></Head>
    <div class="Section">
      <div class="NavBar">
        <TabBar msg="/dashuju"></TabBar>
      </div>
      <div class="Section-right">
        <div class="content">
          <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
            <el-tab-pane label="政府投资项目" name="first">
              <div class="btn_top">
                <el-button type="primary" size="small" style="margin-left: 10px"
                  >规划项目</el-button
                >
                <el-button type="primary" size="small" style="margin-left: 30px"
                  >实施项目</el-button
                >
                <el-button type="primary" size="small" style="margin-left: 30px"
                  >预备项目</el-button
                >
                <el-button type="primary" size="small" style="margin-left: 30px"
                  >前期项目</el-button
                >
                <el-button type="primary" size="small" style="margin-left: 30px"
                  >档案项目</el-button
                >
                <el-button type="primary" size="small" style="margin-left: 30px"
                  >退库项目</el-button
                >
              </div>
              <div class="table_one">
                <div class="btn_box">
                  <ul>
                    <li class="transfer">
                      <button>
                        <img src="" alt="" />
                        <span>转移</span>
                      </button>
                    </li>
                    <li>
                      <button>
                        <img src="" alt="" />
                        <span>结转</span>
                      </button>
                    </li>
                    <li>
                      <button>
                        <img src="" alt="" />
                        <span>归档</span>
                      </button>
                    </li>
                    <li>
                      <button>
                        <img src="" alt="" />
                        <span>删除</span>
                      </button>
                    </li>
                    <li>
                      <button>
                        <img src="" alt="" />
                        <span>导出</span>
                      </button>
                    </li>
                    <li>
                      <el-input
                        v-model="input"
                        placeholder="请输入内容"
                      ></el-input>
                      <button class="inquire">
                        <img src="" alt="" />
                        <span>查询</span>
                      </button>
                    </li>
                  </ul>
                  <!-- 转移 -->
                  <div>
                    <el-select v-model="value" placeholder="请选择">
                      <el-option
                        v-for="item in options"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                      </el-option>
                    </el-select>
                  </div>
                  <!-- 结转 -->

                  <!-- 归档 -->

                  <!-- 删除 -->

                  <!-- 导出 -->

                  <!-- 查询 -->
                </div>
                <div class="form_one">
                  <el-table :data="tableData" style="width:242">
                    <el-table-column prop="project_name" label="项目名称" width="242"></el-table-column>
                    <el-table-column prop="Project_year" label="项目年度" width="242"></el-table-column>
                    <el-table-column prop="Project_deadline" label="项目期限" width="242"></el-table-column>
                    <el-table-column prop="Item_category" label="项目类别" width="242"></el-table-column>
                    <el-table-column prop="address" label="建设地址" width="242"></el-table-column>
                    <el-table-column prop="unit" label="实施单位" width="242"></el-table-column>
                    <el-table-column prop="status" label="状态" width="242">
                      <el-button type="danger" round size="mini">审核中</el-button>
                      <el-button type="primary" round size="mini">通过</el-button>
                      <el-button type="info" round size="mini">未通过</el-button>
                    </el-table-column>
                  </el-table>
                </div>
              </div>
            </el-tab-pane>
            <el-tab-pane label="企业投资项目" name="second"
              >日了狗了</el-tab-pane
            >
            <el-tab-pane label="信息化项目" name="third">卷钱跑路</el-tab-pane>
          </el-tabs>
        </div>
        <!-- 分页器 -->
        <div class="shabilaoban">
           <el-pagination
            background
            layout="prev, pager, next"
            :total="1000">
          </el-pagination>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Vue from "vue";
import TabBar from "../components/TabBar";
import Head from "../components/head";
import { Navbar, TabItem } from "mint-ui";

Vue.component(Navbar.name, Navbar);
Vue.component(TabItem.name, TabItem);
export default {
  name: "Dashuju",
  components: {
    TabBar,
    Head
  },
  data() {
    return {
      selected: "",
      activeName: "first",
      input: "",
      tableData: [
        {
          project_name: "卷钱跑路",
          Project_year: "卷钱跑路",
          Project_deadline: "卷钱跑路",
          Item_category: "卷钱跑路",
          address: "卷钱跑路",
          unit: "卷钱跑路",
          status: "卷钱跑路",
        },
      ],
      options: [{
          value: '选项1',
          label: '黄金糕'
        }, {
          value: '选项2',
          label: '双皮奶'
        }, {
          value: '选项3',
          label: '蚵仔煎'
        }, {
          value: '选项4',
          label: '龙须面'
        }, {
          value: '选项5',
          label: '北京烤鸭'
        }],
    };
  },
  methods: {
    handleClick(tab, event) {
      console.log(tab, event);
    },
    sheZhi() {
      this.$router.push("/personalSettings");
    },
  }
};
</script>
<style lang="less" scoped>
.shabilaoban {
  margin-left: 650px;
  margin-top: 30px;
}
.dashuju {
  width: 100%;
  height: 100%;
  background-image: url("../assets/shouyeImage/背景.png");
  
  background-repeat: no-repeat;
  background-size: 100% 100%;
  box-sizing: border-box;
  padding: 0 15px 50px 15px;
  .Section {
    width: 100%;
    height: 90%;
    // background-color: tomato;
    display: flex;
    justify-content: space-between;
    .NavBar {
      width: 8.5%;
      height: 90%;
      box-sizing: border-box;
      padding-top: 5px;
    }
    .Section-right {
      width: 91.5%;
      height: 100%;
      background-color: #f7f7f7;
      box-sizing: border-box;
      padding: 5px;
      border-radius: 10px;
      .content {
        width: 99%;
        background-color: #94c9d8;
        margin-left: 8px;
        .btn_top {
          width: 100%;
          height: 45px;
          background-color: #c7e2f3;
        }
        .table_one {
          width: 100%;
          height: 600px;
          background-color: #ffffff;
          border: 1px solid #b4b3b3;
          .btn_box {
            width: 100%;
            height: 45px;
            border-bottom: 1px dashed black;
            li {
              float: left;
              margin-left: 20px;
              button {
                width: 70px;
                height: 30px;
                border: 1px solid #5ca9d3;
                background-color: #5ca9d3;
                border-radius: 10px;
                margin-top: 5px;
              }
              span {
                color: #fff;
              }
            }
            .transfer {
              margin-left: 10px;
            }
            .inquire {
              margin-left: 1150px;
              margin-top: -17px;
              float: left;
            }
          }
          .form_one {
            width: 100%;
            height: 100%;
            background-color: #fff;
          }
        }
      }
    }
  }
}

// element样式
.mint-navbar .mint-tab-item.is-selected {
  background-color: rgb(205, 133, 17) !important;
}
.el-button {
  margin-top: 5px;
  margin-left: 10px;
}
.el-button--primary {
  border: 1px solid #94c9d8;
  background-color: #94c9d8;
}
.el-dropdown-link {
  cursor: pointer;
  color: #409eff;
}
/deep/ .el-tabs--card > .el-tabs__header {
  border-bottom: 0px solid #e4e7ed;
}
/deep/ .el-tabs--card > .el-tabs__header .el-tabs__item {
  border-bottom: 0px solid transparent;
}
/deep/ .el-tabs--card > .el-tabs__header .el-tabs__nav {
  border: 0px solid black;
}
/deep/ .el-input__inner {
  // float: left;
  margin-left: 890px;
  width: 250px;
  border: 1px solid #707070;
  background-color: #ffffff;
  position: absolute;
  top: -17px;
}
/deep/ .el-table th {
  background-color: #fff !important;
}
/deep/ .el-table th>.cell {
  color: black;
  font-size: 16px;
  font-weight: 700;
}
</style>
